import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Row, Col, Divider, Spin } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;
@connect(({ material, loading, templatesettings }) => ({
  material,
  templatesettings,
  loading: loading.models.templatesettings,
}))
class DetailNotify extends React.Component {
  state = {};

  componentDidMount() {
    const { dispatch, location } = this.props;
    dispatch({
      type: 'templatesettings/fetchNotifyDetail',
      payload: { entryInformId: location.query.id },
    });
  }

  submitcancel = () => {
    router.goBack();
  };

  render() {
    const { templatesettings, loading } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        span: 10,
      },
      wrapperCol: {
        span: 14,
      },
    };
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <div>
            <Card title="查看入职告知" bordered={false}>
              <Form>
                <Row>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label={<span>地区 </span>}>
                      <span>{templatesettings.areaIdName}</span>
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label="合同类型:">
                      <span>{templatesettings.contTypeName}</span>
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label={<span>备注</span>}>
                      <span>{templatesettings.remark}</span>
                    </FormItem>
                  </Col>
                </Row>
              </Form>
              <Divider />
              <Row>
                <Col span={8}>
                  <FormItem {...formItemLayout} label={<span>入职告知 </span>}>
                    <span dangerouslySetInnerHTML={{ __html: templatesettings.informContent }} />
                  </FormItem>
                </Col>
              </Row>
            </Card>
            <Card
              title={
                <div>
                  <span
                    style={{
                      marginRight: 20,
                    }}
                  >
                    特殊产品设置
                  </span>
                </div>
              }
            >
              {templatesettings.asscList && templatesettings.asscList.length
                ? templatesettings.asscList.map(item => (
                    // eslint-disable-next-line react/jsx-indent
                    <div key={item.emlMsgTemplateId}>
                      <Row>
                        <Col span={8}>
                          <FormItem {...formItemLayout1} label={<span>关联产品</span>}>
                            {item.pdName}
                          </FormItem>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={8}>
                          <FormItem {...formItemLayout1} label={<span>入职告知</span>}>
                            <span dangerouslySetInnerHTML={{ __html: item.informContent }} />
                          </FormItem>
                        </Col>
                      </Row>
                    </div>
                  ))
                : '暂无数据'}
            </Card>
          </div>
        </Spin>

        <FooterToolbar>
          <Button onClick={this.submitcancel}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default DetailNotify;
